<template>
  <div class="app-container">
    <el-row :gutter="20">
      <!--企业数据-->
      <el-col :span="24" :xs="24">

        <basic-search-form ref="vBasicSearchForm" :columns="columns" inline size="small" @search="handleSearch" label-width="100px"></basic-search-form>

        <basic-table
          ref="vBasicTable"
          :api="listCity"
          :immediate-fetch="false"
          :before-fetch="beforeFetch"
          :table-schema="tableSchema"
          :actions="tableActions"
          :table-prop="tableProp"
          :table-event="tableEvent"
          :row-info="{ rowKey: 'data' }"
        >
          <!-- 表格上方按钮-->
          <template #tableHead="{ total }">
            <div>统计：{{ total }}</div>
            <div style="height: 32px">
              <el-button type="primary" plain icon="el-icon-plus" size="mini" @click="handleAdd">创建开通运营的城市</el-button>
              <el-button type="info" plain icon="el-icon-upload2" size="mini" :disabled="selectIds.length === 0" @click="handleBatchStatusChange(1)">批量禁用</el-button>
              <el-button type="success" plain icon="el-icon-edit" size="mini" :disabled="selectIds.length === 0" @click="handleBatchStatusChange(0)">批量恢复</el-button>
              <el-button type="warning" plain icon="el-icon-download" size="mini" @click="handleExport">导出</el-button>
            </div>
          </template>

        </basic-table>

      </el-col>
    </el-row>

    <!-- 添加或修改开通运营的城市配置对话框 -->
    <save-dialog ref="saveDialog"
                 :title="title"
                 :currentId="form.id"
                 :is-visible.sync="open"
                 @dialogCallBack="handleDialogCallBack"></save-dialog>
    
  </div>
</template>

<script>
import { listCity } from "@/api/system/city";
import { searchColumns, tableActions, tableSchema } from '@/views/system/city/modal.data.list';
import saveDialog from '@/views/system/city/SaveDialog.vue';
export default {
  name: "City",
  components: { saveDialog },
  data() {
    return {
      // 总条数
      total: 0,
      // 弹出层标题
      title: '',
      // 是否显示弹出层
      open: false,
      // 选中数组
      selectIds: [],
      // 编辑用的id
      form: { id: null },
      // 查询参数
      queryParams: {},
      defaultProps: { children: 'children', label: 'label' },
      columns: searchColumns(this),
      tableSchema: tableSchema,
      tableActions: tableActions(this.handleUpdate, this.handleStatusChange, this.handleShowDetail),
      tableProp: {},
      tableEvent: { 'selection-change': (selection) => { this.selectIds = selection.map((item) => item.id); } },
    };
  },
  mounted() {
    this.$refs.vBasicSearchForm.search();
  },
  methods: {
    listCity,
    // 搜索
    handleSearch(form) {
      this.queryParams = { ...form };
      this.$refs.vBasicTable.fetch();
    },
    // 前置
    beforeFetch(params) {
      return { ...this.queryParams };
    },
    // 弹窗回调
    handleDialogCallBack() {
      this.open = false;
      this.$refs.vBasicSearchForm.search();
    },
    // 详情
    handleShowDetail(row) {
      this.$router.push({ name:'CompanyDetail', query: { id:row.id } });
    },
    // 添加
    handleAdd() {
      this.open = true;
      this.title = '创建开通运营的城市';
    },
    // 编辑
    handleUpdate(row) {
      this.title = '编辑开通运营的城市';
      this.form = { ...row };
      this.open = true;
    },
    // 状态修改
    handleStatusChange(row) {
      this.$modal.confirm('确认要执行操作吗？')
        .then(() => {})
        .catch(() => {});
    },
    // 批量修改禁用恢复
    handleBatchStatusChange(status) {
      this.$modal.confirm('确认要执行操作吗？')
        .then(() => {})
        .catch(() => {});
    },
    // 导出按钮操作
    handleExport() {
      this.download('system/city/export', { ...this.queryParams }, `city列表_${new Date().getTime()}.xlsx`)
    },
  },
};
</script>
<style lang="scss" scoped>
.danger { color: #f56c6c; }
.warning { color: #e6a23c; }
</style>
